/*
 * @Author: along
 * @Date: 2018-11-20 13:49:22
 * @Last Modified by: along
 * @Last Modified time: 2021-07-27
 */
<template>
    <div class="container add-class-container">
        <div class="__header">
            <p class="__header_title">
                新建专业
            </p>
        </div>
        <div class="__wraper">
            <div class="__wrap_items">
                <p class="__wrap_title">
                    第1步：选择城市学校
                </p>
                <div class="__wrap_info">
                    <p class="__wrap_info_title">
                        选择城市和学校
                    </p>
                    <el-cascader
                        v-model="cityCollege"
                        :options="dataList"
                        size="medium"
                        style="width: 100%"
                        clearable
                        filterable
                        class="cascader"
                        @change="getSelectData"
                        :props="{
                            value: 'id',
                            label: 'name',
                            children: 'children',
                            lazy: false,
                            leaf: 'leaf',
                            disabled: true,
                            lazyLoad: getCollegeList
                        }"
                    />
                </div>
            </div>
            <div
                class="__wrap_items"
                :style="{marginLeft: '52px'}"
            >
                <p class="__wrap_title">
                    第2步：导入数据
                    <span
                        class="__wrap_title_down"
                        @click="fnDownload"
                    >
                        下载demo表格
                    </span>
                </p>
                <el-button
                    class="__wrap_info_button"
                    :disabled="cityCollege === ''"
                    type="text"
                >
                    导入数据
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        :http-request="fnUploadExcelData"
                        action="noAction"
                        accept=".csv"
                        :show-file-list="false"
                        :disabled="cityCollege === ''"
                    />
                </el-button>
            </div>
        </div>
        <p class="steps-3"><strong :style="{color: 'rgba(51, 51, 51, 1)'}">第3步：确认信息</strong>
            <el-button
                type="text"
                class="add-class-btn"
                :disabled="cityCollege == '' || cityCollege.length < 3"
                @click="fnAddClass"
            >+添加专业</el-button>
        </p>
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            class="__ruleForm"
        >
            <el-table
                :data="ruleForm.tableData"
                border
                height="100%"
                style="width: 100%;padding: 0 24px"
            >
                <el-table-column
                    type="index"
                    width="80"
                    label="序号"
                    align="center"
                />
                <el-table-column
                    header-align="center"
                    align="center"
                    prop="school_college"
                    class-name="class-gray"
                    label="学院"
                >
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="`tableData.${scope.$index}.school_college`"
                            :rules="rules.school_college"
                        >
                            <el-select
                                v-model="scope.row.school_college"
                                placeholder="请选择"
                                size='small'
                                clearable
                            >
                                <el-option
                                    v-for="item in schoolCollege"
                                    :key="item.college_no"
                                    :label="item.college_name"
                                    :value="item.college_no"
                                />
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                    prop="school_major"
                    class-name="class-gray"
                    label="专业"
                >
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="`tableData.${scope.$index}.school_major`"
                            :rules="rules.school_major"
                        >
                            <el-input
                                v-model="scope.row.school_major"
                                clearable
                                size="small"
                            />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                    prop="education_year"
                    class-name="class-gray"
                    label="大学年限"
                >
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="`tableData.${scope.$index}.education_year`"
                            :rules="rules.education_year"
                        >
                            <el-select
                                v-model="scope.row.education_year"
                                placeholder="请选择"
                                size='small'
                                clearable
                            >
                                <el-option
                                    v-for="item in yearList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                                <el-option
                                    label="同上"
                                    :value="99"
                                    v-if="scope.$index"
                                />
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column
                    header-align="center"
                    label="操作"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="fnDelClassItem(scope)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <div class="__footer">
            <el-button
                @click="fnConfirmSubmit"
                :disabled="ruleForm.tableData.length == 0"
                type="primary"
                size="small"
            >确认导入</el-button>
        </div>
    </div>
</template>
<script>
import { back } from "@/mixin/back";

export default {
    mixins: [back],
    data() {
        return {
            cityCollege: '',
            school_name: '',
            academy_name: '',
            dataList: [],
            authResult: {},
            startYear: [],
            levelList: [
                { value: '专科', label: '专科' },
                { value: '本科', label: '本科' },
                { value: '研究生', label: '研究生' },
                { value: '博士', label: '博士' }
            ],
            yearList: [
                { value: 2, label: '2' },
                { value: 3, label: '3' },
                { value: 4, label: '4' },
                { value: 5, label: '5' }
            ],
            ruleForm: {
                tableData: []
            },
            rules: {
                education_level_name: [
                    { required: true, message: '请选择学历', trigger: 'change' },
                ],
                education_year: [
                    { required: true, message: '请选择大学年限', trigger: 'change' },
                ],
                enter_school_year: [
                    { required: true, message: '请选择入学年份', trigger: 'change' },
                ],
                class_name: [
                    { required: true, message: '请输入班级姓名', trigger: 'blur' },
                ],
                class_group_user_count: [
                    { required: true, message: '请输入班级人数', trigger: 'blur' },
                ],
                class_group_qq: [
                    { required: true, message: '请输入班级QQ群', trigger: 'blur' },
                ],
                school_college: [
                    { required: true, message: '请选择学院', trigger: 'change' },
                ],
                school_major: [
                    { required: true, message: '请选择专业', trigger: 'change' },
                ]
            },
            schoolCollege: [],
            majorList: [],
            school_id: '',
            college_no: ''
        };
    },
    mounted() {
        let query = this.$route.query;

        this.school_id = this.$route.query.school_id;
        this.college_no = this.$route.query.college_no;
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', [{ title: "APP后台" }, { title: '社交' }, { title: "学院数据", path: '/student/social-college?school_id=' + this.school_id }, { title: "新建专业" }]);

        // if (query['college_no'] !== undefined) {
        //     let list = [];

        //     list.push(
        //         Number(query.city_id),
        //         Number(query.school_id)
        //         // query.college_no
        //     );

        //     this.cityCollege = list;
        // }

        this.fnGetCity();
        this.getFullyear(2005);
    },
    methods: {
        /**
             * 获取三级联动数据
             */
        fnGetCity() {
            this.$post('/student/local_info%5Cschool_tree', {}, resp => {
                if (resp.code === 1) {
                    this.dataList = resp.data.tree;

                }
            });
        },

        /**
             * 获取入学年份
             */
        getFullyear(startYear) {
            let year = new Date().getFullYear();
            let newYear = [];

            for (let i = year; i >= startYear; i--) {
                newYear.push({
                    value: i,
                    label: i
                });
            }
            this.startYear = this.startYear.concat(newYear);
        },

        /**
             * 选择学校
             */
        fnGetSchool(e) {
            this.dataList.map(item => {
                item.children.map(itm => {
                    if (itm.id == this.cityCollege[1]) {
                        this.school_name = itm.name;
                    }
                    itm.children.map(im => {
                        if (im.id == this.cityCollege[2]) {
                            this.academy_name = im.name;
                        }
                    });
                });
            });
        },

        /**
             * 下载表格
             */
        fnDownload() {
            let schoolId = this.cityCollege !== '' ? this.cityCollege[1] : this.cityCollege;

            let base = this.$baseUrl;
            let ticket = localStorage.getItem('sessionTicket');
            let url = `${base}/student/region_major%5Cimport_template?&__ticket=${ticket}`;

            window.open(url);
        },
        fnDelClassItem(scope) {
            this.ruleForm.tableData.splice(scope.$index, 1);
        },

        /**
         * @description 导入数据
         */
        fnUploadExcelData(e) {
            let formData = new FormData();

            formData.append('file', e.file);
            formData.append('school_id', this.cityCollege[2]);
            this.$post('/student/region_major%5Cimport_preview', formData, resp => {
                if (resp.code == 1) {
                    this.ruleForm.tableData = resp.data.list.reduce((cur,next) => {
                        cur.push({
                            school_college: next.college_no,
                            school_major: next.major_name,
                            education_year: next.max_grade
                        });
                        return cur;
                    }, []);

                    // this.ruleForm.tableData = [{
                    //     school_college: 'sc_71af7662c753e',
                    //     school_major: '12',
                    //     education_year: 2
                    // }];
                }
            });
        },

        /**
             * 路由跳转
             * @param routeName
             * @param query
             */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
             * 确认导入班级
             */
        fnConfirmSubmit() {

            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    // 同上处理
                    this.ruleForm.tableData.forEach((item, index) => {
                        // if (item.education_level_name === 99) {
                        //     item.education_level_name = this.ruleForm.tableData[index - 1].education_level_name;
                        // }
                        if (item.education_year === 99) {
                            item.education_year = this.ruleForm.tableData[index - 1].education_year;
                        }
                        if (item.enter_school_year === 99) {
                            item.enter_school_year = this.ruleForm.tableData[index - 1].enter_school_year;
                        }
                    });

                    const import_list_json = this.ruleForm.tableData.reduce((cur,next) => {
                        cur.push({
                            college_no: next.school_college,
                            major_name: next.school_major,
                            max_grade: next.education_year
                        });
                        return cur;
                    }, []);

                    this.$post('/student/region_major%5Cimport', {
                        // school_id: this.cityCollege[2],
                        import_list_json: JSON.stringify(import_list_json)
                    }, resp => {
                        if (resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                type: 'success',
                                message: resp.msg
                            });

                            setTimeout(() => {
                                this.$router.push({
                                    name: 'socialMajor',
                                    query: {
                                        school_id: this.cityCollege[2],
                                        college_no: this.college_no
                                    }
                                });
                            }, 500);
                        } else {
                            this.$notify({
                                title: '提示',
                                type: 'warning',
                                message: resp.msg
                            });
                        }
                    });
                }
            });

        },

        /**
             * 手动添加班级
             */
        fnAddClass() {
            if (this.ruleForm.tableData.length) {
                this.ruleForm.tableData.push({
                    school_college: '',
                    school_major: '',
                    education_year: 99
                });
            } else {
                this.ruleForm.tableData.push({
                    school_college: '',
                    school_major: '',
                    education_year: ''
                });
            }
        },

        /**
             * 列表渲染辅助函数：列表项为空处理
             */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },

        /**
             * @description 选择学校
             */
        getSelectData(node) {
            console.log('node', node);
            if (node.length === 3) {
                this.$post('/student/region_college%5Cget_list_for_select', {
                    school_id: node[2]
                }, resp => {
                    if (resp.code === 1) {
                        this.schoolCollege = resp.data.list;
                    } else {
                        this.$notify({
                            title: '提示',
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });
            } else {
                this.schoolCollege = [];
            }
        },

        /**
             * 获取学院
             * @param node
             * @param resolve
             */
        getCollegeList(node, resolve) {
            const { level, data, value } = node;

            console.log(level, data, value, 'level, data, value');
            // if(level == 3) {
            //     this.$post('/student/region_college%5Cget_list_for_select', {
            //         school_id: value
            //     }, resp => {
            //         if (resp.code === 1) {
            //             let result = resp.data.list.map((item) => {
            //                 return {
            //                     id: item.college_no,
            //                     name: item.college_name,
            //                     leaf: true
            //                 };
            //             });

            //             resolve(result);
            //         } else{
            //             this.$notify({
            //                 title: '提示',
            //                 type: 'warning',
            //                 message: resp.msg
            //             });
            //         }
            //     });
            // }

            resolve(data);
        }
    }
};
</script>
<style lang="less" scoped>
    .add-class-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        overflow: hidden;
        .__header {
            min-height: 68px;
            border-bottom: 1px rgba(235, 238, 245, 1) solid;
            display: flex;
            align-items: center;
            width: calc(100% - 30px);
            margin: 0 15px;
            background-color: #ffffff;
            box-sizing: border-box;
            padding-left: 35px;
            margin-top: 12px;
            .__header_title {
                color: rgba(51, 51, 51, 1);
                font-size: 20px;
                font-weight: 500;
                position: relative;
                &::before {
                    content: "";
                    position: absolute;
                    width: 3px;
                    height: 20px;
                    background-color: rgba(24, 144, 255, 1);
                    left: -8px;
                    top: -1px;
                }
            }
        }
    }
    .operation-wrapper {
        display: flex;
        flex-direction: row-reverse;
        padding: 12px 23px;
        background-color: #fff;

        .el-button {
            margin-left: 10px;
        }
    }
    .content-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin: 15px;
        overflow-y: auto;
        overflow-x: hidden;
        margin-top: 0px;
    }
    .__wraper {
        // width: 100%;
        background-color: #ffffff;
        box-sizing: border-box;
        padding: 0 32px;
        // border: 1px red solid;
        padding-bottom: 30px;
        padding-top: 30px;
        display: flex;
        margin: 0 15px;
        .__wrap_items {
            display: flex;
            flex-direction: column;
            width: calc((100% - 52px) / 2);
            .__wrap_title {
                color: rgba(51, 51, 51, 1);
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 24px;
                display: flex;
                .__wrap_title_down {
                    display: inline-block;
                    color: rgba(32, 160, 255, 1);
                    font-size: 14px;
                    cursor: pointer;
                    text-decoration: underline;
                    margin-left: 18px;
                    white-space: nowrap;
                    font-weight: bold;
                }
            }
            .__wrap_info {
                display: flex;
                align-items: center;
                .__wrap_info_title {
                    color: rgba(51, 51, 51, 1);
                    font-size: 14px;
                    margin-right: 12px;
                    white-space: nowrap;
                }
            }
            .__wrap_info_button {
                flex: 1;
                height: 36px;
                border: 1px rgba(32, 160, 255, 1) solid;
                border-radius: 4px;
                text-align: center;
                line-height: 36px;
                cursor: pointer;
                font-size: 14px;
                font-weight: 500;
                color: rgba(32, 160, 255, 1);
                padding: 0;
                position: relative;
                .upload-demo {
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 999;
                    // border: 1px red solid;
                    width: 100%;
                }
            }
        }
    }
    .search-wrapper {
        padding: 15px;
        background-color: #fff;
    }
    .steps-desc-wrap {
        background: #fff;
        padding-left: 32px;
        padding-top: 15px;
        font-weight: 500;
        // strong{
        //     color: #1890FF;
        // }
    }
    .steps-3 {
       display: flex;
        justify-content: space-between;
        background-color: #ffffff;
        margin: 0 15px;
        padding: 0 32px;
        align-items: center;
        padding-bottom: 15px;
        strong {
            color: #1890ff;
        }
    }
    .__ruleForm {
        flex: 1;
        // border: 1px red solid;
        margin: 0 15px;
        margin-bottom: 0px;
        background-color: #ffffff;
    }
    .__footer {
        margin: 0 15px;
        margin-bottom: 10px;
        padding-top: 32px;
        padding-bottom: 32px;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
    }
    .filter-item {
        margin-bottom: 15px;
        .el-form-item {
            margin-bottom: 0;
        }
        .el-autocomplete {
            width: 100%;
        }
    }
    .table-normal {
        flex: 1;
        background-color: #fff;
        padding: 0 15px;
        position: relative;
    }
    .table-disabled {
        flex: 1;
        background-color: #fff;
        padding: 0 15px;
        position: relative;
        &:after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            cursor: not-allowed;
            background-image: none;
            background-color: rgba(255, 255, 255, 0.7);
            border-color: #ebeef5;
            left: 0;
            top: 0;
            z-index: 999;
        }
    }
    /deep/ .el-form-item {
        margin-top: 12px;
        margin-bottom: 12px;
    }
    /deep/ .el-form-item__error {
        padding-top: 0;
    }
    .table-wrapper {
        .add-class-btn {
            float: right;
            font-size: 14px;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
        }
        .el-button {
            padding: 0;
        }

        .btn-delete {
            color: #fd4d32;
            &.is-disabled {
                color: #c0c4cc;
                cursor: not-allowed;
            }
        }
        .table-inner-input {
            outline: none;
            font-size: 14px;
            width: 95%;
            height: 32px;
            background: #ffffff;
            text-align: center;
            cursor: pointer;
            border: 1px solid #dcdfe6;
        }
    }
    .confirm-wrapper {
        text-align: center;
        margin: 15px 0;
    }
    .content-school {
        display: flex;
        align-items: center;
        padding-top: 15px;
        background: #fff;
        padding-bottom: 15px;
    }
    .header-title {
        margin-right: 10px;
        margin-left: 15px;
        color: #606266;
    }
    .cascader {
        width: 280px;
    }
    .table-inner-input {
        // background: #fff !important;
    }
</style>
<style lang="less">
    .add-class-wrap {
        // margin-top: 15px;
        padding: 32px !important;
        padding-top: 0px !important;
        color: rgba(51, 51, 51, 1);
        .class-gray {
            background: #fafafa !important;
        }
    }
    .mass-add-del {
        text-align: center;
        .el-button--text {
            color: #999;
        }
        &:hover {
            .el-button--text {
                color: #fd4d23;
            }
        }
    }
    .__wrap_items {
        .upload-demo .el-upload {
            width: 100%;
            height: 36px;
        }
    }

    .add-class-container {
        .el-table--border td,
        .el-table--border th,
        .el-table__body-wrapper
            .el-table--border.is-scrolling-left
            ~ .el-table__fixed {
            border-right: none;
        }
        .el-table__body-wrapper {
            max-height: auto;
        }
        .el-table--border, .el-table--group {
            border-top: none;
        }
        .el-table th {
            background-color: rgba(242, 242, 242, 1) !important;
        }
        .el-table th, .el-table tr {
            background-color: rgba(251, 251, 251, 1);
        }
        .el-input__inner {
            color: #333 !important;
        }
        .el-input__inner::placeholder {
            color: #999 !important;
        }
    }
</style>


